<style scoped lang="less">
@keyframes coverMove {
  0%{
    transform-origin: left top;
    transform: translate(0px) scale(1.05);
  }
  25%{
    transform-origin: right top;
    transform: translate(-10px 0px) scale(1.05);
  }
  50%{
    transform-origin: center;
    transform: translate(-10px -10px) scale(1.05);
  }
  75%{
    transform-origin: left bottom;
    transform: translate(0px -10px) scale(1.05);
  }
  100%{
    transform-origin: left top;
    transform: translate(0px) scale(1.05);
  }
}
.listBox {
  margin: 20px auto 0;
  box-sizing: border-box;
  max-width: 800px;
  padding-bottom: 20px;
  &__grid{
    display:grid;
    grid-template-columns: repeat(auto-fill,minmax(150px,1fr));
    grid-auto-flow: row dense;
    grid-gap: 10px;
    margin-bottom: 20px;
    &__item{
      border-radius: 4px;
      overflow: hidden;
      cursor: pointer;
      position: relative;
      &:hover > &__cover{ animation-play-state: running; }
      &:hover > &__play{ bottom: 0; }
      &:hover > &__title{ white-space: initial;max-height:100%;}
      &__cover{
        animation: coverMove 5s 0s linear infinite reverse paused;
        width: 100%;
        display: block;
        object-fit: cover;
        position: relative;
      }
      &__title{
        //z-index: 1;
        bottom: 0;
        left: 0;
        position: absolute;
        font-size: 12px;
        color: white;
        margin-top: 10px;
        background: rgba(20, 27, 39, 0.21);
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        width: 100%;
        padding: 0 10px;
        box-sizing: border-box;
        transition: all ease-in-out .3s;
        max-height:24px;
        &:hover{
          color: #f8ecea;
        }
      }
      &__play{
        position: absolute;
        bottom: -100%;
        left: 50%;
        transform: translate(-50%);
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: all ease-in-out .3s;
        &__icon{
          display: block;
          width: 30px;
          height: 30px;
        }
      }
    }
  }

}
</style>
<template>
  <div class="listBox">
    <div class="listBox__grid">
      <div class="listBox__grid__item" v-for="(ele,index) of playListCom" :key="index">
        <img :src="ele.coverImageUrl" class="listBox__grid__item__cover">
        <div class="listBox__grid__item__play" @click="handlePlayList(ele)">
          <img :src="playIcon" class="listBox__grid__item__play__icon">
        </div>
        <div class="listBox__grid__item__title" @click="handleGoDetail(ele)">{{ ele.title }}</div>
      </div>
    </div>
    <Paging v-model:page-num="pageParams.offset" :total="count" :page-size="pageParams.limit"/>
  </div>
</template>

<script setup lang="ts">
// todo 资源
import Paging from '@/components/paging'
// @ts-ignore
import playIcon from '../../icon/play-red.png'
import {AxiosService} from "@/core";
import {computed, nextTick, ref, watch} from "vue";
import {formatNumber} from "@/helper";
import netEasyMusicStore from '../../store'
const axios = new AxiosService('netEasyMusic')

const playListApi = ref([])
const playListCom = computed(() => (playListApi.value?.map((ele:any) => ({
  ...ele,
  coverImageUrl: ele?.coverImgUrl , // 封面
  title: ele?.name ?? '-', // 标题
  playCount: formatNumber(ele?.playCount), //播放量
  nickName: ele?.creator?.nickname ?? '-', // 歌单制作者
  description: ele?.description
}))))
// todo 数据
const props = defineProps({
  el:{ type:HTMLElement, default: null },
  category:{ type:String, default: null }
})
// 请求
const pageParams = ref({
  limit: 100,
  offset: 1 // 翻页
})
const params = computed(() => ({
  limit:pageParams.value.limit,
  offset:(pageParams.value.offset -1 )*pageParams.value.limit,
  cat: props.category
}))
const count = ref(0)
const getPlayList = () => {
  axios.get({
    api:'/top/playlist',
    params:params.value,
    success: ({playlists,total}) =>{
      if(props.el) props.el?.scrollTo({top:0, behavior:'smooth'})
      playListApi.value = playlists
      count.value = Number(total ?? 0)
    }
  })
}
watch(params,value => getPlayList() ,{deep:true,immediate:true}) // 参数变化请求列表

// 交互
const handlePlayList = (event:any) => {
  const { id } = event
  netEasyMusicStore.setPlayListById(id,true)
}
const handleGoDetail = (event:any) => {
  const { id } = event
  console.log(id)
}
</script>

